<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			svg{stroke: black;fill: none;width:400px;height:400px;border:1px dashed black;}
		</style>
	</head>
	<body>
		<!--文本的位置和轮廓-->
		<svg>
			<path d="M20 10,20 120 M 10 30 100 30 M 10 70 100 70 M 10 110 100 110" style="stroke: gray;"></path>
			<text x="20" y="30">Simplest Text</text>
			<text x="20" y="70" style="stroke:black">Outlined/filled</text>
			<text x="20" y="110" style="stroke:black;stroke-width: 0.5;fill: none;">Outlined only</text>
		</svg>
		
		<svg>
			<g style="font-size:18pt">
				<text x="20" y="20" style="font-weight:bold;">bold</text>
				<text x="120" y="20" style="font-style: italic;">italic</text>
				<text x="20" y="60" style="text-decoration: underline;">under</text>
				<text x="120" y="60" style="text-decoration: overline;">over</text>
				<text x="200" y="60" style="text-decoration: line-through;">through</text>
				<text x="20" y="90" style="word-spacing: 10pt;">more word space</text>
				<text x="20" y="120" style="word-spacing:-3pt;">less word space</text>
				<text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>
				<text x="20" y="180" style="letter-spacing: 5pt;">narrow letter space</text>
			</g>
		</svg>
		
		
	</body>
</html>
